<div class="layui-card">
    <div class="layui-card-header">
        <div class="layui-btn-group">
            <a class="layui-btn layui-btn-sm newTab" lay-href="<?php echo \yii\helpers\Url::to(['create']) ?>" ><i class="layui-icon layui-icon-add-1"></i>添加任务</a>
            <button class="layui-btn layui-btn-sm layui-btn-normal" id="activeBtn" ><i class="layui-icon layui-icon-ok"></i>激活</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" id="inActiveBtn" ><i class="layui-icon layui-icon-close"></i>禁用</button>
            <a href="outgoing.csv" class="layui-btn layui-btn-sm layui-btn-warm" ><i class="layui-icon layui-icon-template"></i>模板下载</a>
        </div>
    </div>
    <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
        <script type="text/html" id="options">
            <a lay-event="import" class="layui-btn layui-btn-xs" ><i class="layui-icon layui-icon-export"></i>导入号码</a>
            <a lay-event="calls" class="layui-btn layui-btn-xs layui-btn-normal" ><i class="layui-icon layui-icon-form"></i>呼叫详情</a>
            <a lay-event="destroy" class="layui-btn layui-btn-xs layui-btn-danger" ><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
    </div>
    <script type="text/html" id="import-html">
        <div style="padding:20px">
            <div class="layui-form">
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">文件</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal" id="uploadBtn">
                            <i class="layui-icon">&#xe67c;</i>点击选择
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" id="importBtn">确认导入</button>
                </div>
            </div>
        </div>
    </script>
</div>


<?php
$url = yii\helpers\Url::to(['index']);
$status_url = yii\helpers\Url::to(['status']);
$edit_url = yii\helpers\Url::to(['edit']);
$js = <<<JS
    layui.use(['form','element','table', 'layer','upload'],function() {
        var form = layui.form;  
        var element = layui.element;  
        var table = layui.table;  
        var layer = layui.layer;  
        var upload = layui.upload;  
        
        var dataTable = table.render({
            elem: '#dataTable'
            ,height: 'full-200'
            ,url: '{$url}' 
            ,page: true 
            ,cols: [[ 
                {checkbox: true}
                ,{field: 'name', title: '任务名称'}
                ,{field: 'datetime', title: '计划日期',width:200}
                ,{field: 'daytime', title: '计划时间'}
                ,{field: 'retries', title: '重试次数'}
                ,{field: 'max_canales', title: '并发限制',edit:true}
                ,{field: 'trunk', title: '中继线路'}
                ,{field: 'queue', title: '队列'}
                ,{field: 'status_name', title: '状态'}
                ,{title: '操作',toolbar:'#options',width:260}
            ]]
        });
        
        //表单禁用、激活
        $("#activeBtn").click(function() {
            var ids = []
            var hasCheck = table.checkStatus('dataTable')
            var hasCheckData = hasCheck.data
            //只允许选择单条
            if (hasCheckData.length!=1){
                layer.msg('请选择一项操作')
                return false
            } 
            if (hasCheckData.length>0){
                $.each(hasCheckData,function (index,element) {
                    ids.push(element.id)
                })
            }
            if (ids.length>0){
                layer.confirm('确认激活吗？', function(index){
                    $.post("{$status_url}",{ids:ids,estatus:'A'},function (res) {
                        if (res.code==0){
                            dataTable.reload()
                        }
                        layer.close(index);
                        layer.msg(res.msg)
                    });
                })
            }else {
                layer.msg('请选择至少一项')
            }  
        })
        $("#inActiveBtn").click(function() {
            var ids = []
            var hasCheck = table.checkStatus('dataTable')
            var hasCheckData = hasCheck.data
            //只允许选择单条
            if (hasCheckData.length!=1){
                layer.msg('请选择一项操作')
                return false
            } 
            if (hasCheckData.length>0){
                $.each(hasCheckData,function (index,element) {
                    ids.push(element.id)
                })
            }
            if (ids.length>0){
                layer.confirm('确认禁用吗？', function(index){
                    $.post("{$status_url}",{ids:ids,estatus:'I'},function (res) {
                        if (res.code==0){
                            dataTable.reload()
                        }
                        layer.close(index);
                        layer.msg(res.msg)
                    });
                })
            }else {
                layer.msg('请选择至少一项')
            }  
        })
        
        //监听工具条
        table.on('tool(dataTable)', function(obj){ 
            var data = obj.data; 
            var layEvent = obj.event;
            if(layEvent === 'destroy'){
                layer.confirm('确认删除吗？', function(index){
                    $.post(data.destroy_url,{id:data.id},function(res) {
                        layer.msg(res.msg,{},function() {
                            if (res.code==0){
                                obj.del(); 
                                layer.close(index);
                            }   
                        })  
                    })
                });
            } else if(layEvent === 'import'){ 
                layer.open({
                    type : 1,
                    title : '导入号码',
                    shadeClose : true,
                    area : ['500px','auto'],
                    content : $("#import-html").html()
                })
                upload.render({
                    elem: '#uploadBtn'
                    ,url: data.import_url
                    ,auto: false
                    ,multiple: false
                    ,accept: 'file'
                    ,exts: 'csv'
                    ,bindAction: '#importBtn'
                    ,done: function(res){   
                        layer.msg(res.msg,{},function() {
                            if (res.code==0){
                                layer.closeAll();
                            }   
                        })
                    }
                });
            } else if(layEvent === 'calls'){ 
                location.href = data.calls_url
            }
        });
        
        //监听编辑
        table.on('edit(dataTable)', function(obj){ 
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据  
            var load = layer.load()
            $.post('{$edit_url}',{id:obj.data.id,column_name:obj.field,column_value:obj.value},function(res){
                layer.close(load);
                layer.msg(res.msg)
            })
        });
        
    });
JS;
$this->registerJs($js);
